import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icons 文件夹 index.js
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

Vue.config.productionTip = false

// 封装自定义指令 用来控制操作权限
// 自定义指令 v-permission (自定义权限指令)
// 第一个参数 指令名称
// 第二个参数 配置对象
Vue.directive('permission', {
  // 会在指令作用的DOM元素插入到页面完成以后触发
  // 指令钩子函数
  // 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
  // bind
  // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  // inserted
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  // update
  // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
  // componentUpdated
  // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  // unbind
  // 只调用一次，指令与元素解绑时调用。
  // 每个钩子函数有以下参数：
  // el 指令作用的元素的dom元素对象
  // el：指令所绑定的元素，可以用来直接操作 DOM。
  // binding：一个对象，包含以下 property：
  // name：指令名，不包括 v- 前缀。
  // value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  // expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  // arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  // modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  // vnode：Vue 编译生成的虚拟节点。
  // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  // 注意：bind和insert都只调用一次；bind在insert前执行，也就是bind在dom树绘制前调用，insert在dom树绘制后调用；涉及dom操作的，我们一般都用insert，如自动获取焦点指令，只能用insert函数。
  // 使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
  // Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
  // 在使用指令的HTML元素上,我们需要加上 v-
  // 可以用binding.arg去接收":"后的参加参数，这里传递了data1这个变量，data1必须用[]包裹，否则就是‘data1’这个字符串，[]中只能传递一个变量，多个变量可以用对象或数组组装。binding.value去接收"="后的参数，这里是个函数所以用bingding.value()去调用。
  inserted(el, binding) {
    // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.
    const points = store.state.user.userInfo?.roles?.points || [] // 当前用户信息的操作权限
    if (!points.includes(binding.value)) {
      // 不存在就要删除或者禁用
      el.remove() // 删除元素
      // el.disabled = true
      // 线上的权限数据(权限列表 类型type是2的 按钮权限)和线下的代码进行对应
    }
  }
})

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
